<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/static/jquery-3.5.1.js"></script>
    <script>
        function checkName() {
            let name=$("#name").val();
            if (name==null||""==name){
                $("#help-block1").text("用户名不能为空!")
                $("#btn").attr("disabled", true);
            }else {
                $.post({
                url:"${pageContext.request.contextPath}/checkName",
                data:{"uname":name},
                success:function (data) {
                    if (data){
                        $("#help-block1").text("🆗")
                        checkbox1();
                    }else {
                        $("#help-block1").text("⛔")
                    }
                }
            })}
        }
        function checkPassword() {
            let pwd=$("#pwd").val();
            if (pwd==null||""==pwd){
                $("#help-block2").text("密码不能为空!")
                $("#btn").attr("disabled", true);
            }else {
            $.post({
                url:"${pageContext.request.contextPath}/checkPassword",
                data:{"pwd":pwd},
                success:function (data) {
                    if (data){
                        $("#help-block2").text("√")
                        checkbox1();
                    }else {
                        $("#help-block2").text("×")
                        $("#btn").attr("disabled", true);
                    }
                }
            })}
        }

        function userKnow() {
            alert("     尊敬的用户，在使用“BB网”第三方网络平台服务前，" +
                "请您务必认真阅读和遵守本《用户须知》中规定的所有权利和限制。" +
                "\n" +
                "     当您按照注册页面提示填写信息、阅读并同意本《用户须知》且完成全部注册程序后，" +
                "或您以其他“BB网”第三方网络平台允许的方式实际使用本平台服务时，" +
                "即表示您已充分阅读、理解并接受本《用户须知》的全部内容，并与“BB网”第三方网络平台达成协议。" +
                "您承诺接受并遵守本《用户须知》项下的各项约定，届时您不应以未阅读本协议的内容或者未获得本平台对您问询的解答等理由，" +
                "主张本《用户须知》无效，或要求撤销本《用户须知》。")
        }

        function checkbox1() {
            if ($("#box").is(':checked')&&$("#pwd").val()!=null&&
                ""!=$("#pwd").val()&&$("#name").val()!=null&&
                ""!=$("#name").val()&&$("#pwd").val().length>6
                &&$("#name").val().length>5) {
                $("#btn").attr("disabled", false);
            }else {
                $("#btn").attr("disabled", true);
            }
        }
        function toLogin(){
            let name=$("#name").val();
            let password=$("#pwd").val();

            $.post({
                url:"${pageContext.request.contextPath}/checkLogin",
                data:{
                    "n":name,
                    "p":password
                        },
                success:function (data) {
                    if (data){
                        //todo
                        $("#msg").text("登录成功 正在跳转!...");
                        window.location.href="${pageContext.request.contextPath}/toSuccess";
                    }else {
                        $("#msg").text("用户名或密码错误!");
                    }
                }
            })}
    </script>
</head>
<body>

<div class="container-fluid" style="width: 500px;height: 600px;position: absolute; top: 20%;left: 40%">
    <div class="row-fluid">
        <div class="span2">
        </div>
        <div class="span6">
            <form>
                <fieldset>
                    <legend>登录</legend><br/><br/><br/>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="msg" style="color: red; font-size: 20px;font-style: italic;"></span><br/><br/>
                    &nbsp;&nbsp;&nbsp; <label>USERNAME:</label>&nbsp;<input id="name" type="text" required="required" ondurationchange="checkName()" oninput="checkName()" />&nbsp;<span id="help-block1" style="font-size: 8px;font-style: italic">请输入用户名</span><br/><br/>
                    &nbsp;&nbsp; &nbsp;<label>PASSWORD:</label>&nbsp;<input id="pwd" type="password" required="required" ondurationchange="checkPassword()" oninput="checkPassword()" />&nbsp;<span id="help-block2" style="font-size: 8px;font-style: italic">请输入密码</span><br/><br/><br/>
                    &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<p4 id="ah" onclick="userKnow()" style=" text-decoration: underline blue">用户使用须知</p4><br/>
                    &nbsp;&nbsp;&nbsp;<label class="checkbox"><input id="box" value="1" type="checkbox" onchange="checkbox1()"/> 勾选即代表同意上述须知</label><br/><br/>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" id="btn" disabled="disabled" value="登录" onclick="toLogin()"/>
                </fieldset>
            </form>
    </div>
</div>

</body>
</html>
